/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Dimensions} from 'react-native';

import { TabViewAnimated, TabBar } from 'react-native-tab-view';

import BarChartScreen from './BarChartScreen';

const totalWidth = Dimensions.get('window').width;

export default class MediaBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: [
        { key: '1', title: '近7日' },
        { key: '2', title: '近30日' },
        { key: '3', title: '全部' },
      ],
    }
  }
  _handleChangeTab = (index) => {
    this.setState({index});
  };
  _renderHeader = (props) => {
    return <TabBar {...props}
    style={{elevation: 0,backgroundColor: '#ff5757',height: totalWidth*0.104,justifyContent: 'center',borderTopRightRadius: 5}}  
    indicatorStyle={{backgroundColor: "#ffffff",width: 10,marginLeft:(totalWidth/5-10)/2}}
    labelStyle={{fontSize: 9}}
    />;
  };
  _transferUnit = (min,data) => {
    var rs = {};
    rs.unit = "个";
    rs.val = [];
    // if(min > 100000000000){
    //     rs.unit = "千亿";
    //     data.map((val,idx) => {
    //       // playCount7ValueListArr.push(val.y);
    //       rs.val.push({y: (val.y/100000000000).toFixed(1)});
    //     });
    //   }else if(min > 10000000000){
    //     rs.unit = "百亿";
    //     data.map((val,idx) => {
    //       // playCount7ValueListArr.push(val.y);
    //       rs.val.push({y: (val.y/10000000000).toFixed(1)});
    //     });
    //   }else if(min > 1000000000){
    //     rs.unit = "十亿";
    //     data.map((val,idx) => {
    //       // playCount7ValueListArr.push(val.y);
    //       rs.val.push({y: (val.y/1000000000).toFixed(3)});
    //     });
    //   }else 
    if(min > 100000000){
        rs.unit = "亿";
        data.map((val,idx) => {
          // playCount7ValueListArr.push(val.y);
          rs.val.push({y: (val.y/100000000).toFixed(1)});
        });
      }
      // else if(min > 10000000){
      //   rs.unit = "千万";
      //   data.map((val,idx) => {
      //     // playCount7ValueListArr.push(val.y);
      //     rs.val.push({y: (val.y/10000000).toFixed(1)});
      //   });
      // }
      else if(min > 1000000){
        rs.unit = "百万";
        data.map((val,idx) => {
          // playCount7ValueListArr.push(val.y);
          rs.val.push({y: (val.y/1000000).toFixed(1)});
        });
      }
      // else if(min > 100000){
      //   rs.unit = "十万";
      //   data.map((val,idx) => {
      //     // playCount7ValueListArr.push(val.y);
      //     rs.val.push({y: (val.y/100000).toFixed(1)});
      //   });
      // }
      else if(min > 10000){
        rs.unit = "万";
        data.map((val,idx) => {
          // playCount7ValueListArr.push(val.y);
          rs.val.push({y: (val.y/10000).toFixed(1)});
        });
      }
      // else if(min > 1000){
      //   rs.unit = "千";
      //   data.map((val,idx) => {
      //     // playCount7ValueListArr.push(val.y);
      //     rs.val.push({y: (val.y/1000).toFixed(1)});
      //   });
      // }else if(min > 100){
      //   rs.unit = "百";
      //   data.map((val,idx) => {
      //     // playCount7ValueListArr.push(val.y);
      //     rs.val.push({y: (val.y/100).toFixed(1)});
      //   });
      // }
      else{
        rs.unit = "个";
        data.map((val,idx) => {
          // playCount7ValueListArr.push(val.y);
          rs.val.push({y: val.y});
        });
      }
      return rs;
  };
  _renderScene = ({ route }) => {
    var playCount7DateList = [],
     playCount7ValueList = {},
     playCount7ValueListArr = [], 
     playCount30DateList = [], 
     playCount30ValueList = {}, 
     playCount30ValueListArr = [], 
     playCountDateList = [], 
     playCountValueList = {}, 
     playCountValueListArr = [];
    if(this.props.data.playCount7DateList){
      this.props.data.playCount7DateList.map((val,idx) => {
        playCount7DateList.push(val.substring(0));
      });
    }
    if(this.props.data.playCount7ValueList){
      this.props.data.playCount7ValueList.map((val,idx) => {
        playCount7ValueListArr.push(val.y);
      });
      var min = Math.max.apply(null,playCount7ValueListArr);
      playCount7ValueList = this._transferUnit(min, this.props.data.playCount7ValueList);
    }
    if(this.props.data.playCount30DateList){
      this.props.data.playCount30DateList.map((val,idx) => {
        playCount30DateList.push(val.substring(0));
      });
    }
    if(this.props.data.playCount30ValueList){
      this.props.data.playCount30ValueList.map((val,idx) => {
        playCount30ValueListArr.push(val.y);
      });
      var min = Math.max.apply(null,playCount30ValueListArr);
      playCount30ValueList = this._transferUnit(min, this.props.data.playCount30ValueList);
    }
    if(this.props.data.playCountDateList){
      this.props.data.playCountDateList.map((val,idx) => {
        playCountDateList.push(val.substring(0));
      })
    }
    if(this.props.data.playCountValueList){
      this.props.data.playCountValueList.map((val,idx) => {
        playCountValueListArr.push(val.y);
      })
      var min = Math.max.apply(null,playCountValueListArr);
      playCountValueList = this._transferUnit(min, this.props.data.playCountValueList);
    }
    switch (route.key) {
    case '1':
      return playCount7DateList.length?<BarChartScreen time={1} unit={playCount7ValueList.unit} xx={playCount7DateList} yy={playCount7ValueList.val}/>:null;
      break;
    case '2':
      return playCount30DateList.length?<BarChartScreen time={2} unit={playCount30ValueList.unit} xx={playCount30DateList} yy={playCount30ValueList.val}/>:null;
      break;
    case '3':
      return playCountDateList.length?<BarChartScreen time={3} unit={playCountValueList.unit} xx={playCountDateList} yy={playCountValueList.val}/>:null;
      break;
    }
  };
  render() {
    return (
      <TabViewAnimated
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onRequestChangeTab={this._handleChangeTab}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 3,
  },
  page: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
